
<html>
	<head>
		<title>Exemplo: Populando selects de cidades e estados com AJAX (PHP e jQuery) | DaviFerreira blog!</title>
		</head>
	<body>
		
		<label for="strUf">Estado:</label>
		<select name="strUf" id="strUf">
			<option value=""></option>
			<?php				
				include "/conexoes/conecta.php" ;
				$estados = "SELECT * 
				FROM tblUf
				ORDER BY strSiglaUf 
				LIMIT 0,30 "; 
				
				$estados = mysql_query($estados) or die("Erro no SQL: ".mysql_error());	
				
				while ($array_estados = mysql_fetch_array($estados)) { 
				 echo "<option value=" . $array_estados[idUF] . ">" . $array_estados[strSiglaUF] . "</option>" ;
				}
			?>
		</select>

		<label for="cod_cidades">Cidade:</label>
		<span class="carregando">Aguarde, carregando...</span>
		<select name="strCidade" id="strCidade">
			<option value="">-- Escolha um estado --</option>
		</select>

		<script src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
		  google.load('jquery', '1.3');
		</script>		

		<script type="text/javascript">
		$(function(){
			$('#strUf').change(function(){
				if( $(this).val() ) {
					$('#strCIdade').hide();
					$('.carregando').show();
					$.getJSON('cidades.ajax.php?search=',{strUf: $(this).val(), ajax: 'true'}, function(j){
						var options = '<option value=""></option>';	
						for (var i = 0; i < j.length; i++) {
							options += '<option value="' + j[i].strCidade + '">' + j[i].nome + '</option>';
						}	
						$('#strCidade').html(options).show();
						$('.carregando').hide();
					});
				} else {
					$('#strCidade').html('<option value="">– Escolha um estado –</option>');
				}
			});
		});
		</script>
	</body>
</htm>